<template>
  <div>
    <el-row style="margin-top: 20px">
      <el-form ref="search_form" :model="search_form" label-width="80px">
        <el-col :span="4">
          <el-form-item label="店家ID">
            <el-input v-model="search_form.id"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5" style="padding-left: 20px;">
          <el-button type="primary" @click="search_Bth">搜索</el-button>
          <el-button>重置</el-button></el-col>
        <!-- <el-col :span="2"> </el-col> -->
      </el-form>
    </el-row>
    <el-row type="flex" class="row-bg" justify="space-around">
      <el-col :span="4" style="max-height:784px;overflow:scroll;">
        <el-tree :data="directoryData" @node-click="handleNodeClick"></el-tree>
      </el-col>
      <el-col>
        <el-table :data="tableData" border fit highlight-current-row style="width: 100%">
          <el-table-column align="center" label="头像">
            <template slot-scope="{ row }">
              <img style="width: 50px; height: 50px" :src="row.avatar" alt="" />
            </template>
          </el-table-column>
          <el-table-column align="center" prop="store_name" label="店家名称"> </el-table-column>
          <el-table-column align="center" prop="order_count" label="订单数量"> </el-table-column>
          <el-table-column align="center" prop="balance" label="余额"> </el-table-column>
          <el-table-column align="center" label="入驻时间">
            <template slot-scope="{ row }">
              <span>{{ row.entry_time }}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="order_time" label="下单时间">
                        </el-table-column> -->
          <el-table-column align="center" prop="ad_coin_count" label="广告币数量">
          </el-table-column>
          <el-table-column align="center" fixed="right" label="操作">
            <template slot-scope="scope">
              <el-button @click="viewBth(scope.row)" type="text" size="small">查看</el-button>
              <el-button type="text" size="small" @click="editBth(scope.row)">编辑</el-button>
              <el-button type="text" size="small" @click="Upload(scope.row)">上传</el-button>
              <el-button type="text" size="small" @click="details(scope.row)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- :limit.sync="10" -->
        <Pagination v-show="total > 0" :total="total" :page="page" @pagination="pagination" />

      </el-col>
    </el-row>
    <button @click="Upload"> 12345648915</button>

    <!-- 上传弹窗  -->
    <el-dialog title=" 收货地址" :visible.sync="dialogFormVisibleshang">
      <el-form :model="shangchuansj">
        <el-row>
          <el-col :span="8">
            <el-form-item label="店家id" :label-width="formLabelWidth">
              <el-input v-model="shangchuansj.store_id" autocomplete="off" placeholder="请输入店家名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="身份证号" :label-width="formLabelWidth">
              <el-input v-model="shangchuansj.id_card_number" autocomplete="off" placeholder="请输入身份证号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="身份证结束时间" :label-width="formLabelWidth">
              <el-input v-model="shangchuansj.id_card_number_expiry_date" autocomplete="off"
                placeholder="身份证结束时间"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="营业执照号" :label-width="formLabelWidth">
              <el-input v-model="shangchuansj.business_license" autocomplete="off" placeholder="请输入营业执照号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="营业执照结束时间" :label-width="formLabelWidth">
              <el-input v-model="shangchuansj.business_license_expiry_date" autocomplete="off"
                placeholder="永久可以填永久"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <div style="display: flex; justify-content: space-around;">
          <el-form-item label="身份证正面">
            <el-upload ref="uploadInput" class="avatar-uploader" list-type="text" action="" accept=".jpg, .png" :limit="1"
              :auto-upload="false" :file-list="fileList" :on-change="changeFile">
              <img style="width: 200px;height: 200px;" v-if="publicWelfareUrl.length > 0" :src="publicWelfareUrl"
                class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="身份证反面">
            <el-upload ref="uploadInput" class="avatar-uploader" list-type="text" action="" accept=".jpg, .png" :limit="1"
              :auto-upload="false" :file-list="fileList" :on-change="changeFile1">
              <img style="width: 200px;height: 200px;" v-if="publicWelfareUrl1.length > 0" :src="publicWelfareUrl1"
                class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="营业执照照片">
            <el-upload ref="uploadInput" class="avatar-uploader" list-type="text" action="" accept=".jpg, .png" :limit="1"
              :auto-upload="false" :file-list="fileList" :on-change="changeFile2">
              <img style="width: 200px;height: 200px;" v-if="publicWelfareUrl2.length > 0" :src="publicWelfareUrl2"
                class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleshang = false">取 消</el-button>
        <el-button type="primary" @click="editConfirmationshang">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 弹窗 -->
    <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
      <el-form :model="editDataForm">
        <el-row>
          <el-col :span="8">
            <el-form-item label="店家名称" :label-width="formLabelWidth">
              <el-input v-model="editDataForm.store_name" autocomplete="off" placeholder="请输入店家名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="订单数量" :label-width="formLabelWidth">
              <el-input v-model="editDataForm.order_count" autocomplete="off" placeholder="请输入订单数量"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="余额" :label-width="formLabelWidth">
              <el-input v-model="editDataForm.balance" autocomplete="off" placeholder="请输入余额"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="广告币数量" :label-width="formLabelWidth">
              <el-input v-model="editDataForm.ad_coin_count" autocomplete="off" placeholder="请输入广告币数量"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- :before-upload="beforeAvatarUpload" -->
        <el-form-item label="插入图片">
          <el-upload ref="uploadInput" class="avatar-uploader" list-type="text" action="" accept=".jpg, .png" :limit="1"
            :auto-upload="false" :file-list="fileList" :on-change="changeFile">
            <img style="width: 200px;height: 200px;" v-if="publicWelfareUrl.length > 0" :src="publicWelfareUrl"
              class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="editConfirmation">确 定</el-button>

      </div>
    </el-dialog>
    <!-- 查看 -->
    <el-dialog :visible.sync="dialogView" width="50%">
      <el-descriptions title="店家信息" direction="vertical" :column="4" border>
        <el-descriptions-item label="店家ID">{{ rowobj.store_id }}</el-descriptions-item>
        <el-descriptions-item label="店家名称">{{ rowobj.store_name }}</el-descriptions-item>
        <el-descriptions-item label="入驻时间">{{ rowobj.entry_time }}</el-descriptions-item>
        <el-descriptions-item label="省份"> {{ rowobj.province }} </el-descriptions-item>
        <el-descriptions-item label="城市">{{ rowobj.city }}</el-descriptions-item>
        <el-descriptions-item label="区域">{{ rowobj.district }}</el-descriptions-item>
        <el-descriptions-item label="地址">{{ rowobj.address }}</el-descriptions-item>
        <el-descriptions-item label="会员状态">{{ rowobj.membership_status }}</el-descriptions-item>
        <el-descriptions-item label="是否启用广告收益">{{ rowobj.is_ad_earning_enabled }}</el-descriptions-item>
        <el-descriptions-item label="总收益">{{ rowobj.total_earnings }}</el-descriptions-item>
        <el-descriptions-item label="余额">{{ rowobj.balance }}</el-descriptions-item>
        <el-descriptions-item label="广告币数量">{{ rowobj.ad_coin_count }}</el-descriptions-item>
        <el-descriptions-item label="营业时间">{{ rowobj.opening_hours }}</el-descriptions-item>
        <el-descriptions-item label="广告位状态">{{ rowobj.ad_slot_status }}</el-descriptions-item>
        <el-descriptions-item label="会员等级">{{ rowobj.membership_level }}</el-descriptions-item>
      </el-descriptions>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogView = false">取 消</el-button>
        <el-button type="primary" @click="dialogView = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { file_upload_api, queryManager, querySearch, modifyInterface, directory_api, qqrey, querys } from "@/api/article";
import { timestampToTime } from "@/utils"
import Pagination from '@/components/Pagination'
import { mapState } from 'vuex'
// import { indexOf } from "mock/article";
export default {
  components: { Pagination },
  data() {
    return {
      page: 1,
      total: 10,
      tableData: [],
      search_form: {},
      dialogFormVisibleshang: false,//上传弹窗
      dialogFormVisible: false,
      dialogView: false, //查看弹框
      editDataForm: {},
      //上传数据
      shangchuansj: {
        store_id: "",//店家id
        id_card_number: "",//身份证号
        business_license: "",//营业执照号
        id_card_number_expiry_date: "",//身份证结束时间
        business_license_expiry_date: "",//营业执照结束时间
        id_card_number_up_image: "",//身份证正面
        id_card_number_down_image: "",//身份证号反面
        business_license_image: ""//营业执照照片
      },
      formLabelWidth: '130px',
      rowobj: {}, //当前列的数据
      publicWelfareUrl: [],//身份证正面
      publicWelfareUrl1: [],//反面
      publicWelfareUrl2: [],//营业执照
      directoryData: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      arealabe: {},//地区目录值
      fileList: [],//图片地址数据
    };
  },
  methods: {
    editConfirmationshang() {
      this.dialogFormVisibleshang = false
      let formData = new FormData();
      for (let i in this.shangchuansj) {
        formData.append(i, this.shangchuansj[i])
      }
      // console.log(this.shangchuansj, "上传数据");
      querys(formData).then((res) => {
        console.log(res, "上传返回数据");
      })
    },
    // 上传弹出框
    Upload(data) {
      this.dialogFormVisibleshang = true

    },
    // 文件状态改变时的钩子
    changeFile(file, fileList) {//身份证正面
      this.shangchuansj.id_card_number_up_image = file.raw
      console.log(file.raw, 'file111')
      fileList.forEach(async item => {
        const img = await this.getBase64(item.raw);
        this.publicWelfareUrl.push(img);
      });
      // file_upload_api({ img: 1111 })
      console.log(this.publicWelfareUrl, ' this.nextProjectForm.publicWelfareUrl');
    },
    changeFile1(file, fileList) {//身份证反面
      // console.log(file.raw, 'file111')
      this.shangchuansj.id_card_number_down_image = file.raw
      fileList.forEach(async item => {
        const img = await this.getBase64(item.raw);
        this.publicWelfareUrl1.push(img);
      });
      // file_upload_api({ img: 1111 })
      console.log(this.publicWelfareUrl1, ' this.nextProjectForm.publicWelfareUrl');
    },
    changeFile2(file, fileList) {//营业执照照片
      // console.log(file.raw, 'file111')
      this.shangchuansj.business_license_image = file.raw
      fileList.forEach(async item => {
        const img = await this.getBase64(item.raw);
        this.publicWelfareUrl2.push(img);
      });
      // file_upload_api({ img: 1111 })
      console.log(this.publicWelfareUrl2, ' this.nextProjectForm.publicWelfareUrl');
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      return isJPG
    },
    //列表数据
    getList(search_data) {
      let params = {
        page: this.page,
        // ...this.regionalData,
        province: JSON.stringify(""),
        city: JSON.stringify(""),
        district: JSON.stringify(""),
        ...search_data
      };
      queryManager(params).then((res) => {
        res.result.forEach(item => {
          item.entry_time = timestampToTime(item.entry_time)
        });
        this.tableData = res.result;
      });
    },
    //省市县列表数据
    queryDirectory_api() {
      directory_api({
        province: '',
        city: '',
        district: '',
      }).then(res => {
        this.directoryData = this.transformData(res.result);
      })
    },
    search_Bth() {
      let params = {
        //省市县权限
        ...this.regionalData,
        code: '商户',
        ...this.search_form,
        ...this.arealabe
      };
      //   this.getList(this.search_form)
      querySearch(params).then(res => {
        res.result.forEach(item => {
          item.entry_time = timestampToTime(item.entry_time)
        });
        this.tableData = res.result;
      })
    },
    //编辑
    editBth(row) {
      Object.assign(this.rowobj, {});
      this.dialogFormVisible = true;
      this.rowobj = row;
      console.log(row);
    },
    details() {
      this.$router.push("/components/details")
    },
    viewBth(row) {
      Object.assign(this.rowobj, {});
      this.dialogView = true
      this.rowobj = row;
    },
    //编辑确认框
    editConfirmation() {
      if (this.publicWelfareUrl.length > 0) {
        this.editDataForm.avatar = this.publicWelfareUrl;
      }
      let params = {
        // ...this.regionalData,
        province: '',
        city: '',
        district: '',
        code_name: '商户',
        id: this.rowobj.store_id,
        data: {
          ...this.editDataForm
        }
        // province: '',
        // city: '',
        // district: '',

      };
      console.log(this.editDataForm, 'editDataForm')
      modifyInterface(params).then(res => {
        this.getList()
      })
    },
    pagination({ page }) {
      this.page = page;
      this.getList()
    },
    //省市县列表函数
    handleNodeClick({ label }) {
      console.log(label.substring(label.length - 1), 'substring')
      console.log(label, 'label')
      this.arealabe.label = label
      // this.search_Bth()
    },
    // 图片转Base64
    getBase64(file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        let imgBase64 = '';
        reader.readAsDataURL(file);
        reader.onload = () => {
          imgBase64 = reader.result;
        };
        reader.onerror = error => reject(error);
        reader.onloadend = () => resolve(imgBase64);
      });
    },
    //数据转换格式
    transformData(data) {
      //对象结构转成数据遍历
      return Object.entries(data).map(([label, children]) => {//数据接口对转成数据
        //判断value是数组的话返回遍历数组中的项
        if (Array.isArray(children)) {
          return { label, children: children.map(item => ({ label: item })) };
        } else if (Object.keys(children).length > 0) { //不是数组的话继续往下找直到找到数组的结构 递归
          return { label, children: this.transformData(children) };
        } else { //预防堆内存过大
          return { label };
        }
      });
    },

  },
  computed: {
    ...mapState('user', { regionalData: "regionalData" })
  },
  created() {
    Object.assign(this.$data, this.$options.data())
    this.getList();
    this.queryDirectory_api()
    // ...this.regionalData
  },

};
</script>
<style lang="scss" scoped>
::v-deep.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
